<template>
  <div class="dashboard-container">
    <!-- Echarts 图表 -->
    <el-row :gutter="10">
      <el-col :sm="24" :lg="16" class="mb-2">
        <div>
          <div class="title">
            <div>监控视频</div>
            <div>
              {{
                moment(currentTime, "M/D/YYYY, h:mm:ss A").format(
                  "YYYY年MM月DD日 HH:mm:ss"
                )
              }}
            </div>
          </div>

          <div class="grid-container">
            <!-- 根据数据源数量渲染不同数量的宫格 -->
            <div
              v-for="(item, index) in dataSources"
              :class="dataSources.length > 4 ? 'grid9' : 'grid4'"
              :key="index"
              class="grid-item"
            >
              <FlvVideoPlayer :videoUrl="yourDynamicVideoUrl" class="playBox" />
            </div>
          </div>
        </div>

        <div>
          <FunnelChart />
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <div>
          <div class="title">
            <div>报警信息</div>
            <div></div>
          </div>

          <div class="listBox">
            <Alarm />
          </div>

          <div class="mt-5">
            <div class="title">
              <div>设备运行状态</div>
              <div>
                <el-input
                  v-model="input3"
                  placeholder="输入设备Ip"
                  class="input-with-select"
                >
                  <template #append>
                    <el-button :icon="Search" />
                  </template>
                </el-input>
              </div>
            </div>

            <div>
              <div class="demo-collapse">
                <el-collapse accordion>
                  <el-collapse-item
                    :class="item.status == 0 ? 'normal' : 'danger'"
                    v-for="(item, index) in deviceSources"
                    :key="index"
                    :name="index + '1'"
                  >
                    <template #title>
                      <div class="device">
                        <span>设备名称：{{ item.name }}</span>
                        <span> IP:{{ item.ip }}</span>
                      </div>
                    </template>
                    <div class="progressBox">
                      <div class="progressText">CPU</div>
                      <div class="progress">
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          :percentage="item.cpu"
                          status="exception"
                        />
                      </div>
                    </div>

                    <div class="progressBox">
                      <div class="progressText">内存</div>
                      <div class="progress">
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          :percentage="item.diskUse"
                          status="success"
                        />
                      </div>
                    </div>

                    <div class="progressBox">
                      <div class="progressText">温度</div>
                      <div class="progress">
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          :percentage="item.temperature"
                        />
                      </div>
                    </div>

                    <div class="progressBox">
                      <div class="progressText">
                        硬盘 ({{ item.MemoryUse }}G/{{ item.MemoryAll }}G)
                      </div>
                      <div class="progress">
                        <el-progress
                          :text-inside="true"
                          :stroke-width="20"
                          :percentage="(item.MemoryUse / item.MemoryAll) * 100"
                          status="success"
                        />
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";

const input3 = ref("");
const select = ref("");

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import moment from "moment";

// import FlvVideoPlayer from '@/components/FlvVideoPlayer.vue';
const yourDynamicVideoUrl = ref(
  "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
);

const currentTime = ref<string>("");

let dataSources = ref([1, 1, 1, 1, 1, 1, 1, 1, 1]);
let deviceSources = ref([
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 80,
    disk: "12G",
    MemoryUse: 100,
    MemoryAll: 200,
    diskUse: 18,
    temperature: 23,
    status: 1,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    MemoryUse: 100,
    diskUse: 12,
    MemoryAll: 200,
    temperature: 23,
    status: 0,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    MemoryUse: 100,
    diskUse: 14,
    MemoryAll: 200,
    temperature: 23,
    status: 0,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    diskUse: 41,
    MemoryUse: 100,
    MemoryAll: 200,
    temperature: 23,
    status: 0,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    MemoryUse: 100,
    MemoryAll: 200,
    diskUse: 11,
    temperature: 23,
    status: 0,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    MemoryUse: 100,
    MemoryAll: 200,
    diskUse: 1,
    temperature: 23,
    status: 0,
  },
  {
    name: "003",
    ip: "192.168.17.1",
    cpu: 10,
    disk: "12G",
    MemoryUse: 100,
    diskUse: 29,
    MemoryAll: 200,
    temperature: 23,
    status: 0,
  },
]);

const updateTime = () => {
  // 获取北京时间
  const beijingTime = new Date().toLocaleString("en-US", {
    timeZone: "Asia/Shanghai",
  });

  // 更新页面上的时间
  currentTime.value = beijingTime;

  // 每秒钟更新一次时间
  setInterval(() => {
    const newTime = new Date().toLocaleString("en-US", {
      timeZone: "Asia/Shanghai",
    });
    currentTime.value = newTime;
  }, 1000);
};

const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};

onMounted(() => {
  // 页面加载后开始更新时间
  updateTime();
});
</script>

<style lang="scss">
.progressBox {
  height: 30px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;

  .progressText {
    width: 150px;
  }

  .progress {
    width: 300px;
  }
}

.normal {
  background: green;
  color: #fff;
}

// .el-collapse-item.danger .el-collapse-item__header {
//   background: #f00;
//   color: #fff;
// }

.el-collapse {
  .danger {
    .el-collapse-item__header {
      background: rgb(97, 7, 7);
      color: #fff;
    }
    .el-collapse-item__wrap {
      background: rgb(97, 7, 7);
      color: #fff;
    }
    .progressText {
      color: #fff;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 30px;
}

.device {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.grid-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  height: 500px;

  justify-content: center;
  align-items: center;

  /* 宫格之间的间隔 */
}

.grid4 {
  width: calc(50% - 20px);

  width: calc(50% - 10px);
  height: calc(50% - 10px);
}

.grid9 {
  width: 33.33%;

  width: calc(33.33% - 10px);
  height: calc(33.33% - 10px);
}

.playBox {
  width: 100%;
  height: 100%;
}

.dashboard-container {
  position: relative;
  padding: 10px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
